<template>
  <div class="search">
    <div id="logo">
      <a href="https://www.jd.com/"
        ><i class="iconfont icon-pay-jingdong"></i><span>京东</span></a
      >
    </div>
    <div id="search-m">
      <div class="search-logo">
        <a href="https://www.jd.com/" class="iconfont icon-pay-jingdong"></a>
        <span id="text">京东</span>
      </div>
      <div class="form">
        <input type="text" />
        <span class="photo-search">
          <i class="iconfont icon-xiangji"></i>
        </span>
        <button>
          <i class="iconfont icon-sousuo"></i>
        </button>
      </div>
    </div>
    <div id="hotwords">
      <Item :lists="lists1" :ulDisplay="'inline-block'"></Item>
    </div>
    <div id="navitem">
      <Item
        class="navitem-header"
        :lists="lists2"
        :size="navSize"
        :ulDisplay="'inline-block'"
      ></Item>
    </div>
  </div>
</template>
<script>
import Item from "@/components/Item.vue";
export default {
  name: "search",
  components: {
    Item,
  },
  data() {
    return {
      lists1: [
        {
          name: "京东泳装节",
          path: "https://pro.jd.com/mall/active/2QyGinyqGBhJpzKibhTwfuLkYW1e/index.html",
        },
        {
          name: "自营电脑",
          path: "https://pro.jd.com/mall/active/24qWmGEbiPnPYxZzEfMj6ktgWxxR/index.html",
        },
        {
          name: "88购物节",
          path: "https://pro.jd.com/mall/active/3d34Pm49obpjLEdhhagSZuM5QrwC/index.html",
        },
        {
          name: "新风空调",
          path: "https://prodev.jd.com/mall/active/2KwUoULZwmV1bH4A98vzC9DedVeP/index.html",
        },
        {
          name: "清凉节",
          path: "https://prodev.jd.com/mall/active/3pFSpDY1CkTnw44k8L1jGevrr5Bi/index.html",
        },
        {
          name: "品质男装",
          path: "https://pro.jd.com/mall/active/47qy7brgpnsEWfsEcFRutPU3oQbk/index.html",
        },
        {
          name: "斗破苍穹",
          path: "https://pro.jd.com/mall/active/SyNEMyANkXQuUmzn5dUef8CQGPA/index.html",
        },
      ],
      lists2: [
        {
          name: "秒杀",
          path: "https://miaosha.jd.com/",
        },
        {
          name: "优惠劵",
          path: "https://a.jd.com/",
        },
        {
          name: "PLUS会员",
          path: "https://plus.jd.com/index?flow_system=appicon&flow_entrance=appicon11&flow_channel=pc",
        },
        {
          name: "品牌闪购",
          path: "https://red.jd.com/",
        },
        {
          name: "拍卖",
          path: "https://paimai.jd.com/",
        },
        {
          name: "京东家电",
          path: "https://jiadian.jd.com/",
        },
        {
          name: "京东超市",
          path: "https://chaoshi.jd.com/",
        },
        {
          name: "京东生鲜",
          path: "https://fresh.jd.com/",
        },
        {
          name: "京东国际",
          path: "https://www.jd.hk/",
        },
        {
          name: "京东云",
          path: "https://www.jdcloud.com/cn/pages/618cloud%20?utm_source=MO_jdsc0618&utm_medium=banner&utm_campaign=ggw&utm_term=NA",
        },
      ],
      navSize: 18,
    };
  },
};
</script>
<style scoped>
/* logo */
#logo {
  z-index: 2;
  position: absolute;
  width: 140px;
  height: 120px;
  text-align: center;
  margin-left: 30px;
  background: #fff;
}
#logo a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: -3px;
}
#logo .icon-pay-jingdong {
  font-size: 56px;
}
#logo a span {
  color: red;
  font-size: 25px;
  font-weight: 800;
}
/* 搜索框 */
#search-m {
  position: relative;
  z-index: 1;
  height: 60px;
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.search-logo {
  display: flex;
  align-items: center;
  height: 60px;
}
/* 搜索框图标 */
.search-logo .icon-pay-jingdong {
  font-size: 50px;
}
#text {
  color: red;
  font-size: 20px;
  font-weight: bolder;
  margin-left: 10px;
}
/* 框 */
.form {
  width: 530px;
  height: 32px;
  position: absolute;
  left: 175px;
  top: 15px;
  border: 2px solid red;
  margin-left: 50px;
}
.form input {
  border: none;
  outline: none;
  width: 410px;
  font-size: 16px;
  padding: 4px 10px;
}
.photo-search {
  padding: 10px;
}
.icon-xiangji {
  color: #666;
  font-size: 16px;
}
.form button {
  border: none;
  background: red;
  width: 60px;
  height: 33px;
  position: absolute;
  right: -1px;
}
.icon-sousuo {
  color: #fff;
}
/* 热词 */
#hotwords {
  position: absolute;
  margin-left: 255px;
  width: 450px;
  overflow: hidden;
}
/* 导航栏 */
#navitem {
  position: absolute;
  margin-left: 190px;
  height: 40px;
  width: 721px;
  bottom: 0;
  display: flex;
  overflow: hidden;
}
</style>